<template>
    <div>
      <van-loading
         v-if="!films"
         size="24px"
         >加载中...</van-loading
      >

<!-- films加载完毕时显式具体数据 -->
<!-- <p v-else>films: {{ films }}</p> -->
<ul v-else>
  <FilmItem v-for="item in films" :key="item.filmId" :item="item" @click="$router.push(`/film/${item.filmId}`)"></FilmItem>
</ul>
    </div>
</template>

<script>
import { getPlayings } from "../../api/movieApi";
import FilmItem from "./FilmItem.vue"
    export default {
      components:{
       FilmItem,
      },
        data() {
            return {
             films:null,
            }
        },
        mounted() {
    // getPlayings的返回值是Promise对象
    getPlayings(1).then(
      // 拿到Promise履约电影列表数据 赋值给当前组件实例this的films
      (films) => (this.films = films)
    );
  },
    };
</script>

<style lang="scss" scoped>
@import "../../assets/variable.scss";
 .loading {
  background-color: #ddd;
  text-align: center;
}
.van-loading {
   text-align: center;
   background-color: rgba(0, 0, 0, 0.05);
   height: 40px;
   line-height: 40px;
}
li {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 10px;
  font-size: 13px;
  color:#888;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 66px;
    }
  }

  .middle {
    display: flex;
    flex-direction: column;
    justify-content: center;

    flex-grow: 1;
    margin-left: 10px;

    p {
      margin-bottom: 2px;
    }

    span.name {
      font-size: 16px;
      color: #333;
    }

    span.dimension {
      background-color: #ccc;
      color: white;
      border-radius: 2px;
      margin-left: 5px;
      padding: 0 2px;
      font-size: 12px;
    }

    span.grade {
      color: $myOrange;
    }

    span.actors {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 14rem;
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

    button {
      width: 50px;
      background-color: white;
      color: $myOrange;
      border: 1px solid $myOrange;
      padding: 3px 5px;
      border-radius: 2px;
      font-size: 13px;
    }
  }
}
</style>